<template>
  <div class="school-list-container">
    <!-- 页面标题和操作栏 -->
    <div class="page-header">
      <h2 class="page-title">京剧流派管理</h2>
      <div class="page-actions">
        <el-button type="primary" icon="el-icon-plus" @click="handleAddSchool">添加流派</el-button>
        <el-input
          placeholder="搜索流派名称"
          v-model="searchQuery"
          class="search-input"
          prefix-icon="el-icon-search"
          clearable
          @clear="loadSchoolList"
          @keyup.enter.native="searchSchools"
        >
          <el-button slot="append" icon="el-icon-search" @click="searchSchools"></el-button>
        </el-input>
      </div>
    </div>


    <!-- 流派列表-表格式 -->
    <el-card shadow="hover" class="table-card">
      <el-table :data="filteredSchools" border stripe style="width: 100%" v-loading="loading" class="school-table"
        :header-cell-style="{ backgroundColor: '#f5f7fa', color: '#606266' }">
        <el-table-column prop="schoolId" label="ID" width="200" align="center"></el-table-column>
        <el-table-column prop="schoolName" label="流派名称" width="200" align="center">
          <template slot-scope="scope">
            {{ scope.row.schoolName }}
          </template>
        </el-table-column>
        <el-table-column prop="founder" label="创始人" width="150" align="center"></el-table-column>
        <el-table-column prop="category" label="主要行当" width="150" align="center">
          <template slot-scope="scope">
            <el-tag v-for="catId in scope.row.category.split(',')" :key="catId" 
                    :type="getCategoryTagType(getCategoryNameById(catId))" 
                    size="small" class="category-tag">
              {{ getCategoryNameById(catId) }}
            </el-tag>
          </template>
        </el-table-column>
        <el-table-column prop="foundedTime" label="创立时间" width="200" align="center"></el-table-column>
        <el-table-column prop="createTime" label="创建时间" width="200" align="center"></el-table-column>
        <el-table-column prop="createUser" label="创建人" width="200" align="center"></el-table-column>
        <el-table-column label="操作" width="250" align="center" fixed="right">
          <template slot-scope="scope">
            <div class="action-buttons">
              <el-tooltip content="编辑" placement="top">
                <el-button type="primary" size="mini" icon="el-icon-edit"
                  @click="handleEditSchool(scope.row)"></el-button>
              </el-tooltip>
              <el-tooltip content="查看详情" placement="top">
                <el-button type="info" size="mini" icon="el-icon-view"
                  @click="handleViewSchool(scope.row)"></el-button>
              </el-tooltip>
              <el-tooltip content="删除" placement="top">
                <el-button type="danger" size="mini" icon="el-icon-delete"
                  @click="handleDeleteSchool(scope.row)"></el-button>
              </el-tooltip>
            </div>
          </template>
        </el-table-column>
      </el-table>

      <!-- 分页控件 -->
      <div class="pagination-container">
        <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange"
          :current-page="pagination.currentPage" :page-sizes="[8, 16, 24, 32]" :page-size="pagination.pageSize"
          layout="total, sizes, prev, pager, next, jumper" :total="pagination.total" background></el-pagination>
      </div>
    </el-card>



    <!-- 添加/编辑流派对话框 -->
    <el-dialog :title="dialogTitle" :visible.sync="dialogVisible" width="60%" :close-on-click-modal="false"
      :before-close="handleDialogClose">
      <el-form :model="schoolForm" :rules="schoolRules" ref="schoolForm" label-width="120px" class="school-form">
        <el-row :gutter="20">
          <el-col :span="12">
            <el-form-item label="流派名称" prop="schoolName">
              <el-input v-model="schoolForm.schoolName" placeholder="请输入流派名称"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="主要行当" prop="category">
              <el-select v-model="schoolForm.category" multiple placeholder="请选择行当" style="width: 100%">
                <el-option v-for="item in categoryOptions" :key="item.categoriesId" :label="item.categoriesName"
                  :value="item.categoriesId">
                </el-option>
              </el-select>
            </el-form-item>
          </el-col>
        </el-row>

        <el-row :gutter="20">
          <el-col :span="12">
            <el-form-item label="创始人" prop="founder">
              <el-input v-model="schoolForm.founder" placeholder="请输入创始人姓名"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="创立时间" prop="foundedTime">
              <el-select v-model="schoolForm.foundedTime" placeholder="请选择创立时间" style="width: 100%">
                <el-option-group label="清朝时期">
                  <el-option label="17世纪中期(1644-1650年代)" value="17世纪中期"></el-option>
                  <el-option label="17世纪晚期(1660-1690年代)" value="17世纪晚期"></el-option>
                  <el-option label="18世纪早期(1700-1730年代)" value="18世纪早期"></el-option>
                  <el-option label="18世纪中期(1740-1770年代)" value="18世纪中期"></el-option>
                  <el-option label="18世纪晚期(1780-1790年代)" value="18世纪晚期"></el-option>
                  <el-option label="19世纪早期(1800-1830年代)" value="19世纪早期"></el-option>
                  <el-option label="19世纪中期(1840-1870年代)" value="19世纪中期"></el-option>
                  <el-option label="19世纪晚期(1880-1900年代)" value="19世纪晚期"></el-option>
                </el-option-group>
                <el-option-group label="民国时期">
                  <el-option label="20世纪早期(1910年代)" value="20世纪10年代"></el-option>
                  <el-option label="20世纪20年代" value="20世纪20年代"></el-option>
                  <el-option label="20世纪30年代" value="20世纪30年代"></el-option>
                  <el-option label="20世纪40年代" value="20世纪40年代"></el-option>
                </el-option-group>
                <el-option-group label="新中国成立后">
                  <el-option label="20世纪50年代" value="20世纪50年代"></el-option>
                  <el-option label="20世纪60年代" value="20世纪60年代"></el-option>
                  <el-option label="20世纪70年代" value="20世纪70年代"></el-option>
                  <el-option label="20世纪80年代" value="20世纪80年代"></el-option>
                  <el-option label="20世纪90年代" value="20世纪90年代"></el-option>
                  <el-option label="21世纪00年代" value="21世纪00年代"></el-option>
                  <el-option label="21世纪10年代" value="21世纪10年代"></el-option>
                  <el-option label="21世纪20年代" value="21世纪20年代"></el-option>
                </el-option-group>
              </el-select>
            </el-form-item>
          </el-col>
        </el-row>

        <el-form-item label="流派代表图片" prop="image">
                    <el-upload class="image-uploader" action="http://localhost:9002/api/system/image/imageschoolfounder"
                        :show-file-list="false" :on-success="handleImageSuccess" :before-upload="beforeImageUpload">
                        <img v-if="schoolForm.image" :src="schoolForm.image" class="school-preview-image">
                        <i v-else class="el-icon-plus image-uploader-icon"></i>
                    </el-upload>
                    <div class="upload-tip">请上传流派代表图片，建议尺寸不小于300×300像素，JPG、PNG格式</div>
        </el-form-item>

        <el-form-item label="流派简介" prop="description">
          <el-input type="textarea" v-model="schoolForm.description" placeholder="请输入流派简介" :rows="4"></el-input>
        </el-form-item>

        <el-form-item label="流派特点">
          <div class="features-container">
            <el-row class="add-feature-row">
              <el-col :span="22">
                <div class="features-label">特点列表</div>
              </el-col>
              <el-col :span="2" style="text-align: right;">
                <el-button type="primary" icon="el-icon-plus" size="small" @click="addFeature" circle></el-button>
              </el-col>
            </el-row>
            <div v-for="(feature, index) in schoolForm.features" :key="index" class="feature-item">
              <el-row :gutter="10">
                <el-col :span="8">
                  <el-input v-model="feature.title" placeholder="特点名称"></el-input>
                </el-col>
                <el-col :span="14">
                  <el-input v-model="feature.description" placeholder="特点描述"></el-input>
                </el-col>
                <el-col :span="2" style="text-align: right;">
                  <el-button type="danger" icon="el-icon-delete" circle size="mini"
                    @click="removeFeature(index)"></el-button>
                </el-col>
              </el-row>
            </div>
            <div v-if="schoolForm.features.length === 0" class="no-features">
              <i class="el-icon-info"></i> 暂无特点，请点击添加按钮添加流派特点
            </div>
          </div>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="handleCancel">取 消</el-button>
        <el-button type="primary" @click="submitSchoolForm" :loading="submitLoading">确 定</el-button>
      </div>
    </el-dialog>

    <!-- 流派详情对话框 -->
    <el-dialog title="流派详情" :visible.sync="detailsVisible" width="70%" class="school-details-dialog">
      <div v-if="currentSchool" class="school-details">
        <div class="school-header">
          <div class="school-image-container">
            <img :src="currentSchool.image" alt="流派图片" class="school-detail-image">
          </div>
          <div class="school-basic-info">
            <h2 class="school-name">{{ currentSchool.schoolName }}</h2>
            <p class="school-meta">
              <span class="meta-item">
                <i class="el-icon-user"></i>
                创始人：{{ currentSchool.founder }}
              </span>
              <span class="meta-item">
                <i class="el-icon-date"></i>
                创立时间：{{ currentSchool.foundedTime }}
              </span>
              <span class="meta-item">
                <i class="el-icon-s-custom"></i>
                主要行当：{{ currentSchool.category.join(', ') }}
              </span>
            </p>
          </div>
        </div>

        <el-divider content-position="left">流派介绍</el-divider>
        <p class="school-description">{{ currentSchool.description || '暂无介绍' }}</p>

        <el-divider content-position="left">流派特点</el-divider>
        <div class="school-features">
          <div v-if="currentSchool.features && currentSchool.features.length > 0">
            <el-row :gutter="20" class="feature-cards">
              <el-col :xs="24" :sm="12" v-for="(feature, index) in currentSchool.features" :key="index">
                <el-card class="feature-card">
                  <div slot="header" class="card-header">
                    <i class="el-icon-star-on"></i> {{ feature.title }}
                  </div>
                  <div class="card-content">
                    {{ feature.description }}
                  </div>
                </el-card>
              </el-col>
            </el-row>
          </div>
          <p v-else>暂无记录</p>
        </div>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import service from '@/utils/request'

export default {
  name: 'SchoolList',
  data() {
    return {
      // 流派列表数据
      schoolList: [],
      loading: false,
      searchQuery: '',
      categoryFilter: '', // 行当筛选

      // 分页配置
      pagination: {
        currentPage: 1,
        pageSize: 8,
        total: 0
      },

      // 对话框配置
      dialogVisible: false,
      dialogTitle: '',
      detailsVisible: false,
      submitLoading: false,


      // 当前选中的流派
      currentSchool: null,

      // 表单数据 - 按照图片中表结构设计
      schoolForm: {
        schoolId: '',
        schoolName: '',
        founder: '',
        foundedTime: '',
        description: '',
        image: '', // 用于表单显示，实际保存时存入schoolImage
        features: [], // 流派特点，存储到artist_school_feature表
        category: [], // 主要行当，多选
        token: localStorage.getItem('token')
      },

      // 表单验证规则
      schoolRules: {
        schoolName: [
          { required: true, message: '请输入流派名称', trigger: 'blur' },
          { min: 2, max: 50, message: '长度在 2 到 50 个字符', trigger: 'blur' }
        ],
        founder: [
          { required: true, message: '请输入创始人姓名', trigger: 'blur' }
        ],
        description: [
          { required: true, message: '请输入流派简介', trigger: 'blur' }
        ],
        foundedTime: [
          { required: true, message: '请选择创立时间', trigger: 'change' }
        ],
        category: [
          { required: true, message: '请选择至少一个主要行当', trigger: 'change' }
        ]
      },

      // 行当选项
      categoryOptions: []
    }
  },
  computed: {
    // 根据行当筛选流派列表 - 移除此过滤功能
    filteredSchools() {
      return this.schoolList;
    }
  },
  created() {
    this.loadSchoolList();
    this.loadCategoryOptions();
  },
  methods: {
    handleCancel() {
      if (this.schoolForm.image) {
        service.delete('/api/system/image/deleteImageschoolfounder', {
          params: {
            url: this.schoolForm.image
          }
        }

        ).then(res => {
          if (res.code === 200) {
            this.resetForm(); // 重置表单
          }
        })
      }
      this.dialogVisible = false; // 关闭对话框
    },
    resetForm() {
      this.schoolForm = {
        schoolId: '',
        schoolName: '',
        founder: '',
        foundedTime: '',
        description: '',
        image: '',
        features: [],
        category: [],
        token: localStorage.getItem('token')
      }
    },
    // 加载流派列表
    loadSchoolList() {
      this.loading = true;
      // 先确保行当选项已加载
      if (this.categoryOptions.length === 0) {
        this.loadCategoryOptions().then(() => {
          this.fetchSchoolList();
        });
      } else {
        this.fetchSchoolList();
      }
    },

    fetchSchoolList() {
      // 原来的loadSchoolList内容移到这里
      service.get('/api/content/school/getSchoolList', {
        params: {
          pageNum: this.pagination.currentPage,
          pageSize: this.pagination.pageSize,
          schoolName: this.searchQuery
        }
      }).then(res => {
        if (res.code === 200) {
          this.schoolList = res.data.list;
          this.pagination.total = res.data.total;
        } else {
          this.$message.error('获取流派列表失败');
        }
        this.loading = false;
      }).catch(error => {
        console.error('获取流派列表失败:', error);
        this.loading = false;
        this.$message.error('获取流派列表失败：' + (error.message || '未知错误'));
      });
    },

    // 搜索流派
    searchSchools() {
      if (this.searchQuery.trim() === '') {
        this.loadSchoolList();
        return;
      }

      this.loading = true;
      // 调用加载方法，传入搜索参数
      this.loadSchoolList();
    },

    // 加载行当选项
    loadCategoryOptions() {
      return new Promise((resolve, reject) => {
        service.get('/api/content/category/getCategoryList', {
          params: {
            pageNum: 1,
            pageSize: 100 // 加载所有行当
          }
        }).then(res => {
          if (res.code === 200) {
            this.categoryOptions = res.data.list;
            resolve();
          } else {
            console.error('获取行当列表失败');
            this.$message.error('获取行当列表失败');
            reject();
          }
        }).catch(error => {
          console.error('获取行当列表失败:', error);
          this.$message.error('获取行当列表失败：' + (error.message || '未知错误'));
          reject();
        });
      });
    },

    // 添加流派
    handleAddSchool() {
      this.dialogTitle = '添加流派';
      this.schoolForm = {
        schoolId: '',
        schoolName: '',
        founder: '',
        foundedTime: '',
        description: '',
        image: '', // 用于表单显示
        features: [],
        category: [],
        token: localStorage.getItem('token')
      };
      this.dialogVisible = true;
    },

    // 编辑流派
    handleEditSchool(row) {
      this.dialogTitle = '编辑流派';
      
      // 深拷贝，避免直接修改表格数据
      const formData = JSON.parse(JSON.stringify(row));
      
      // 处理category字段，确保是数组类型
      if (typeof formData.category === 'string') {
        formData.category = formData.category.split(',');
      }
      
      // 确保features是数组
      if (!formData.features) {
        // 可能需要从后端获取流派特点数据
        this.loadSchoolFeatures(formData.schoolId, formData);
      } else if (!Array.isArray(formData.features)) {
        formData.features = [];
      }
      
      this.schoolForm = formData;
      this.dialogVisible = true;
    },
    
    // 加载流派特点数据
    loadSchoolFeatures(schoolId, formData) {
      console.log("加载流派特点数据:", schoolId);
      service.get(`/api/content/school/getSchoolFeatures/${schoolId}`).then(res => {
        if (res.code === 200) {
          // 将返回的特点数据适配为前端格式
          formData.features = res.data.map(item => ({
            title: item.title,
            description: item.description
          }));
        } else {
          formData.features = [];
          console.warn("未找到流派特点数据");
        }
        // 不管是否成功，都更新表单数据
        this.schoolForm = formData;
      }).catch(error => {
        console.error("获取流派特点失败:", error);
        formData.features = [];
        this.schoolForm = formData;
        this.$message.error("获取流派特点失败，请手动添加");
      });
    },

    // 查看流派详情
    handleViewSchool(row) {
      // 深拷贝，避免直接修改表格数据
      const schoolDetail = JSON.parse(JSON.stringify(row));
      
      // 确保category是可用于展示的数组
      if (typeof schoolDetail.category === 'string') {
        const categoryIds = schoolDetail.category.split(',');
        schoolDetail.category = categoryIds.map(id => this.getCategoryNameById(id));
      }
      
      this.currentSchool = schoolDetail;
      
      // 如果没有特点数据，尝试加载
      if (!this.currentSchool.features || !Array.isArray(this.currentSchool.features) || this.currentSchool.features.length === 0) {
        this.loadSchoolDetailsFeatures(schoolDetail.schoolId);
      } else {
        this.detailsVisible = true;
      }
    },
    
    // 加载流派详情的特点数据
    loadSchoolDetailsFeatures(schoolId) {
      const loading = this.$loading({
        lock: true,
        text: '加载流派特点数据...',
        spinner: 'el-icon-loading',
        background: 'rgba(0, 0, 0, 0.7)'
      });
      
      service.get(`/api/content/school/getSchoolFeatures/${schoolId}`).then(res => {
        loading.close();
        if (res.code === 200) {
          // 将返回的特点数据适配为前端格式
          this.currentSchool.features = res.data.map(item => ({
            title: item.title,
            description: item.description
          }));
        } else {
          this.currentSchool.features = [];
        }
        this.detailsVisible = true;
      }).catch(error => {
        loading.close();
        console.error("获取流派特点失败:", error);
        this.currentSchool.features = [];
        this.detailsVisible = true;
        this.$message.error("获取流派特点失败");
      });
    },

    // 删除流派
    handleDeleteSchool(row) {
      this.$confirm('确定要删除该流派吗？', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        console.log('删除流派:', row);
        // 实际开发中应替换为真实接口
        service.delete(`/api/content/school/deleteSchool/${row.schoolId}`).then(res => {
          if (res.code === 200) {
            this.$message.success('删除成功');
            this.loadSchoolList();
          } else {
            this.$message.error('删除失败');
          }
        }).catch(error => {
          console.error('删除流派失败:', error);
          this.$message.error('删除流派失败');
        });
      }).catch(() => {
        // 取消删除
      });
    },

    // 提交表单
    submitSchoolForm() {
      this.$refs.schoolForm.validate(valid => {
        if (!valid) return;

        this.submitLoading = true;
        const loading = this.$loading({
          lock: true,
          text: this.schoolForm.schoolId ? '正在更新...' : '正在添加...',
          spinner: 'el-icon-loading',
          background: 'rgba(0, 0, 0, 0.7)'
        });

        // 准备提交的数据
        const submitData = { ...this.schoolForm };
        submitData.token = localStorage.getItem('token');

        // 将 category 数组转换为以逗号分隔的字符串
        if (Array.isArray(submitData.category)) {
          submitData.category = submitData.category.join(',');
        }
        
        // 处理流派特点数据
        // 注意: 由于features在特点表中单独存储，需要确保它是格式正确的数组
        if (!Array.isArray(submitData.features)) {
          submitData.features = [];
        }
        
        // 检查特点数据的完整性
        submitData.features = submitData.features.filter(feature => 
          feature.title && feature.title.trim() && 
          feature.description && feature.description.trim()
        );

        // 发送请求
        const isUpdate = !!this.schoolForm.schoolId;
        const request = isUpdate
          ? service.put('/api/content/school/updateSchool', submitData)
          : service.post('/api/content/school/addSchool', submitData);

        request.then(res => {
          this.submitLoading = false;
          loading.close();
          
          if (res.code === 200) {
            this.dialogVisible = false;
            this.$message.success(isUpdate ? '更新成功' : '添加成功');
            this.loadSchoolList();
          } else {
            this.$message.error(res.message || (isUpdate ? '更新流派失败' : '添加流派失败'));
          }
        }).catch(error => {
          console.error(isUpdate ? '更新流派失败:' : '添加流派失败:', error);
          this.submitLoading = false;
          loading.close();
          this.$message.error(isUpdate ? '更新流派失败' : '添加流派失败');
        });
      });
    },

    // 分页相关方法
    handleSizeChange(val) {
      this.pagination.pageSize = val;
      this.loadSchoolList();
    },

    handleCurrentChange(val) {
      this.pagination.currentPage = val;
      this.loadSchoolList();
    },

    // 对话框关闭前的处理
    handleDialogClose(done) {
      this.$refs.schoolForm.resetFields();
      done();
    },

    // 添加特点
    addFeature() {
      this.schoolForm.features.push({
        title: '',
        description: ''
      });
    },

    // 删除特点
    removeFeature(index) {
      this.schoolForm.features.splice(index, 1);
    },

    // 获取行当标签类型
    getCategoryTagType(category) {
      const types = {
        '老生': 'primary',
        '青衣': 'success',
        '花旦': 'warning',
        '武旦': 'danger',
        '小生': 'info',
        '净行': 'primary',
        '旦行': 'success',
        '生行': 'warning',
        '丑行': 'info'
      };
      return types[category] || '';
    },

    // 图片上传相关方法
    handleImageSuccess(res, file) {
      // 实际开发中应根据后端返回的路径赋值
      if (res.code === 200) {
        this.schoolForm.image = res.data;
        console.log('上传的文件名:', file.name);
      } else {
        this.$message.error('上传失败');
      }
    },
    

    beforeImageUpload(file) {
      const isJPGOrPNG = file.type === 'image/jpeg' || file.type === 'image/png';
      const isLt4M = file.size / 1024 / 1024 < 4;

      if (!isJPGOrPNG) {
        this.$message.error('图片只能是 JPG 或 PNG 格式!');
      }
      if (!isLt4M) {
        this.$message.error('图片大小不能超过 2MB!');
      }

      return isJPGOrPNG && isLt4M;
      
    },

    // 根据行当ID获取行当名称
    getCategoryNameById(categoryId) {
      const category = this.categoryOptions.find(item => item.categoriesId === categoryId);
      return category ? category.categoriesName : categoryId; // 如果找不到对应的行当，则显示ID
    }
  }
}
</script>

<style scoped>
.school-list-container {
  padding: 20px;
}

/* 页面标题和操作栏 */
.page-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 20px;
}

.page-title {
  font-size: 22px;
  color: #333;
  margin: 0;
  position: relative;
  padding-left: 15px;
}

.page-title:before {
  content: '';
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
  width: 4px;
  height: 20px;
  background: #8B0000;
  border-radius: 2px;
}

.page-actions {
  display: flex;
  gap: 10px;
}

.search-input {
  width: 250px;
}

/* 表格操作按钮样式 */
.action-buttons {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 5px;
}

/* 行当筛选区域 */
.category-filter {
  text-align: center;
  margin-bottom: 30px;
}

/* 表格样式 */
.table-card {
  margin-bottom: 20px;
  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
}

.school-table {
  margin-bottom: 20px;
}

.category-tag {
  margin-right: 5px;
  margin-bottom: 5px;
}

/* 分页样式 */
.pagination-container {
  display: flex;
  justify-content: flex-end;
  margin-top: 20px;
}

/* 流派列表卡片样式 */
.schools-list {
  margin-bottom: 30px;
  min-height: 400px;
}

.school-card-col {
  margin-bottom: 25px;
}

.school-card {
  height: 100%;
  transition: transform 0.3s, box-shadow 0.3s;
  overflow: hidden;
}

.school-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 10px 20px rgba(0, 0, 0, 0.1);
}

.school-content {
  display: flex;
  flex-direction: column;
  height: 100%;
}

.school-image {
  height: 200px;
  position: relative;
  overflow: hidden;
}

.school-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.3s;
}

.school-card:hover .school-image img {
  transform: scale(1.05);
}

.school-category {
  position: absolute;
  top: 10px;
  right: 10px;
}

.school-info {
  padding: 15px;
  flex: 1;
  display: flex;
  flex-direction: column;
}

.school-name {
  margin: 0 0 15px 0;
  font-size: 18px;
  color: #333;
  font-weight: bold;
}

.school-founder,
.school-founded-time {
  margin: 5px 0;
  color: #666;
  font-size: 14px;
}

.school-founder i,
.school-founded-time i {
  margin-right: 5px;
  color: #8B0000;
}

.school-actions {
  margin-top: auto;
  display: flex;
  justify-content: flex-end;
  gap: 10px;
  padding-top: 15px;
}

/* 空数据提示 */
.empty-data {
  text-align: center;
  padding: 50px 0;
  color: #909399;
}

.empty-data i {
  font-size: 40px;
  color: #dcdcdc;
  margin-bottom: 15px;
}

/* 表单相关样式 */
.upload-tip {
  font-size: 12px;
  color: #909399;
  margin-top: 5px;
}

.image-uploader {
  border: 1px dashed #d9d9d9;
  border-radius: 6px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
  width: 178px;
  height: 178px;
}

.image-uploader:hover {
  border-color: #409EFF;
}

.image-uploader-icon {
  font-size: 28px;
  color: #8c939d;
  width: 178px;
  height: 178px;
  line-height: 178px;
  text-align: center;
}

.school-preview-image {
  width: 178px;
  height: 178px;
  display: block;
  object-fit: cover;
}

.features-container {
  border: 1px solid #ebeef5;
  border-radius: 4px;
  padding: 10px;
  background-color: #f9f9f9;
}

.add-feature-row {
  margin-bottom: 10px;
  border-bottom: 1px solid #ebeef5;
  padding-bottom: 10px;
}

.features-label {
  font-weight: bold;
  color: #606266;
}

.feature-item {
  margin-bottom: 10px;
  padding: 10px;
  background-color: #fff;
  border-radius: 4px;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
}

.no-features {
  text-align: center;
  color: #909399;
  padding: 20px 0;
}

.no-features i {
  margin-right: 5px;
}

/* 详情对话框样式 */
.school-details {
  padding: 10px;
}

.school-header {
  display: flex;
  margin-bottom: 20px;
}

.school-image-container {
  width: 150px;
  height: 150px;
  margin-right: 20px;
}

.school-detail-image {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 5px;
}

.school-name {
  font-size: 24px;
  color: #333;
  margin: 0 0 10px 0;
}

.school-meta {
  color: #666;
}

.meta-item {
  margin-right: 15px;
}

.meta-item i {
  margin-right: 5px;
  color: #8B0000;
}

.school-description {
  line-height: 1.8;
  text-align: justify;
}

.feature-cards {
  margin-top: 20px;
}

.feature-card {
  margin-bottom: 20px;
  height: 100%;
}

.card-header {
  display: flex;
  align-items: center;
  font-weight: bold;
  color: #8B0000;
}

.card-header i {
  margin-right: 10px;
  color: #8B0000;
}

.card-content {
  padding: 10px 0;
  line-height: 1.6;
}

.school-features {
  margin-bottom: 20px;
}

/* 传承人对话框样式 */
.successors-manager {
  padding: 10px;
}

.mb-10 {
  margin-bottom: 10px;
}

.mb-20 {
  margin-bottom: 20px;
}

.mt-10 {
  margin-top: 10px;
}

.ml-10 {
  margin-left: 10px;
}

.successor-item {
  margin-bottom: 15px;
  padding: 15px;
  background-color: #f9f9f9;
  border-radius: 4px;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
  transition: all 0.3s ease;
}

.successor-item:hover {
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
  transform: translateY(-2px);
}

.empty-successors {
  text-align: center;
  padding: 30px 0;
  color: #909399;
  border: 1px dashed #dcdfe6;
  border-radius: 4px;
  margin-bottom: 20px;
}

.empty-successors i {
  font-size: 40px;
  color: #dcdcdc;
  margin-bottom: 10px;
}

.add-successor-btn {
  text-align: center;
  margin: 15px 0;
}

/* 响应式调整 */
@media (max-width: 768px) {
  .page-header {
    flex-direction: column;
    align-items: flex-start;
  }

  .page-title {
    margin-bottom: 15px;
  }

  .page-actions {
    width: 100%;
    flex-wrap: wrap;
  }

  .search-input {
    width: 100%;
    margin-bottom: 10px;
  }

  .school-header {
    flex-direction: column;
  }

  .school-image-container {
    width: 100%;
    height: auto;
    margin-right: 0;
    margin-bottom: 15px;
  }
}

/* 传承人搜索提示样式 */
.search-tip {
  margin-top: 10px;
  font-size: 12px;
  color: #909399;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
}

/* 传承人表单样式优化 */
.successor-item .el-select .el-input.is-focus .el-input__inner,
.successor-item .el-select .el-input__inner:focus {
  border-color: #8B0000;
}
</style>